import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class AllComment extends StatefulWidget {
  final TextEditingController? controller;
  final ValueChanged<String>? onSubmitted;

  const AllComment({super.key, this.controller, this.onSubmitted});

  @override
  State<AllComment> createState() => _AllCommentState();
}

class _AllCommentState extends State<AllComment> with WidgetsBindingObserver {
  double _bottom = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _bottom = MediaQueryData.fromView(WidgetsBinding.instance.platformDispatcher.views.first)
            .viewInsets
            .bottom;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    var child = SizedBox(
      height: 460,
      child: Column(
        children: <Widget>[
          SizedBox(
            height: 50,
            child: Stack(
              children: [
                Center(
                  child: Text(
                    '全部评论',
                    style:
                        StylesUtils.customTextStyle(color: ColorsUtils.color3333, fontSize: 16.sp),
                  ),
                ),
                Positioned(
                    width: 50,
                    top: 0,
                    right: 0,
                    bottom: 0,
                    child: Center(
                      child: IconButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          icon: Icon(
                            Icons.close,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                            size: 20,
                          )),
                    ))
              ],
            ),
          ),
          Expanded(
              child: ListView(
            padding: EdgeInsets.symmetric(horizontal: 15.w),
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 15.h),
                child: Column(
                  children: [
                    SizedBox(
                      height: 40.h,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          CircleAvatar(
                            radius: 20.w,
                            backgroundColor: Colors.transparent,
                            backgroundImage: const NetworkImage(
                              'https://img1.baidu.com/it/u=2230340413,2442217261&fm=253&app=53&size=f60,60&n=0&g=0n&f=jpeg&fmt=auto?sec=1706863521&t=c2d07c1ca9bb49ddf5e55884d5ab3de7',
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                height: 20.h,
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '五行缺钱',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 15.sp),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: EdgeInsets.only(top: 5.h),
                                child: Text(
                                  '2023-11-25  来自北京',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999, fontSize: 12.sp),
                                ),
                              )
                            ],
                          )),
                          Align(
                            alignment: Alignment.topRight,
                            child:
                                ToolsUtils.assetImageSvg('u791.svg', width: 16.sp, height: 16.sp),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 10.h),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '去故宫建议和贴士： 避开周末，人会少很多 故宫餐厅就餐会排队，建议早点去 如果第一次去，走中轴线游览 如果第二次去，游览故宫东侧延禧宫珍宝',
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: StylesUtils.customTextStyle(
                            fontSize: 15.sp, color: ColorsUtils.color3333, lineHeight: 1.5.h),
                      ),
                    ),
                    StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 8.w,
                      mainAxisSpacing: 8.w,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img1.baidu.com/it/u=4122970627,3800550945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img1.baidu.com/it/u=2488364572,2759096292&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img0.baidu.com/it/u=3010233418,2224126101&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img0.baidu.com/it/u=3368221683,1026380209&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img2.baidu.com/it/u=2619871711,1635215366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 15.h),
                child: Column(
                  children: [
                    SizedBox(
                      height: 40.h,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          CircleAvatar(
                            radius: 20.w,
                            backgroundColor: Colors.transparent,
                            backgroundImage: const NetworkImage(
                              'https://img0.baidu.com/it/u=2947341353,265385944&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1704387600&t=86d9882d1eb9832c3b3e92c518cf95cf',
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                height: 20.h,
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  'M****0',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 15.sp),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: EdgeInsets.only(top: 5.h),
                                child: Text(
                                  '2023-10-25  来自广东',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999, fontSize: 12.sp),
                                ),
                              )
                            ],
                          )),
                          Align(
                              alignment: Alignment.topRight,
                              child: Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: ToolsUtils.assetImageSvg('u791.svg',
                                        width: 16.sp, height: 16.sp),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                    text: '32',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6666, fontSize: 12.sp))
                              ])))
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 10.h),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '去故宫建议和贴士： 避开周末，人会少很多 故宫餐厅就餐会排队，建议早点去 如果第一次去，走中轴线游览 如果第二次去，游览故宫东侧延禧宫珍宝',
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: StylesUtils.customTextStyle(
                            fontSize: 15.sp, color: ColorsUtils.color3333, lineHeight: 1.5.h),
                      ),
                    ),
                    StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 8.w,
                      mainAxisSpacing: 8.w,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img1.baidu.com/it/u=4122970627,3800550945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img1.baidu.com/it/u=2488364572,2759096292&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img0.baidu.com/it/u=3010233418,2224126101&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img0.baidu.com/it/u=3368221683,1026380209&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.w),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img2.baidu.com/it/u=2619871711,1635215366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            height: 110.h,
                            placeholder: (context, url) => const CircularProgressIndicator(),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          )),
          Container(
            height: 60,
            alignment: Alignment.center,
            child: FractionallySizedBox(
              heightFactor: 0.8,
              widthFactor: 0.95,
              child: TextField(
                controller: widget.controller,
                cursorWidth: 2.0,
                cursorRadius: const Radius.circular(2),
                cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                style: StylesUtils.customTextStyle(fontSize: 15.sp, color: ColorsUtils.color3333),
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.h), borderSide: BorderSide.none),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.h), borderSide: BorderSide.none),
                    hintText: '说点什么吧…',
                    contentPadding: EdgeInsets.symmetric(
                      vertical: 15.h,
                    ),
                    isCollapsed: true,
                    isDense: true,
                    hintStyle: StylesUtils.customTextStyle(
                      color: ColorsUtils.color9999,
                    ),
                    prefix: ToolsUtils.assetImageSvg('u775.svg', width: 15, height: 15.h),
                    prefixIconConstraints: BoxConstraints.expand(width: 15.w, height: 15.h),
                    constraints: BoxConstraints(maxHeight: 40.h),
                    fillColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                    filled: true),
                onSubmitted: widget.onSubmitted,
              ),
            ),
          )
        ],
      ),
    );
    var padding = Padding(
      padding: EdgeInsets.only(
        // 下面这一行是重点
        bottom: _bottom,
      ),
      child: child,
    );
    return Dialog(
      insetPadding: EdgeInsets.zero,
      backgroundColor: Colors.white,
      alignment: Alignment.bottomLeft,
      elevation: 0,
      surfaceTintColor: Colors.white,
      shape: const RoundedRectangleBorder(
          borderRadius:
              BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
      child: padding,
    );
  }
}
